<template>
  <section>
    <div class="filter-container">
        <common-input @keyup.enter.native="handleFilter" class="w200" placeholder="名称/编号" v-model="listQuery.keyword" />
        <el-date-picker
          class="ml10"
          size="mini"
          v-model="listQuery.contractEnd"
          type="date"
        format="yyyy年MM月dd日"
        value-format="yyyy-MM-dd"
          placeholder="注册时间">
        </el-date-picker>
        <el-button size="mini" class="ml10" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
        <el-button size="mini" class="ml10" @click="handleCreate" type="primary" icon="el-icon-plus">新增</el-button>
    </div>
    <el-tabs size="mini" :before-leave='leaveTab' v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="0"></el-tab-pane>
      <el-tab-pane label="已审核" name="1"></el-tab-pane>
      <el-tab-pane label="待审核" name="2"></el-tab-pane>
      <el-tab-pane label="被驳回" name="3"></el-tab-pane>
    </el-tabs>
    <el-table max-height="500"
                :data="list"
                style="width: 100%">
            
            <el-table-column align="center" label="商户编号">
                <template slot-scope="scope">
                    <span>{{scope.row.code}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="商户名称">
                <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="联系人">
                <template slot-scope="scope">
                    <span>{{scope.row.consignee}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="注册时间">
                <template slot-scope="scope">
                    <span>{{scope.row.createdAt}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                    <el-tag :type="getStatusColor(scope.row)">{{scope.row.statusText}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-dropdown>
                        <el-button
                                type="text">
                            操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="handleUpdate(scope.row)">编辑</el-dropdown-item>
                            <el-dropdown-item v-if="scope.row.status==0" @click.native="handleCheck(scope.row)">审核</el-dropdown-item>
                            <el-dropdown-item v-if="scope.row.status==1" @click.native="handleCheck2(scope.row)">取消审核</el-dropdown-item>
                            <el-dropdown-item v-if="scope.row.status==0&&scope.row.isFront==1" @click.native="handleRefuse(scope.row)">拒绝审核</el-dropdown-item>
                            <el-dropdown-item @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[20,30, 50]" :page-size="listQuery.num" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
  </section>
</template>

<script>
    import {
        seller_list,
        seller_del,
        seller_check,
        seller_check2,
        seller_refuse
    } from '../../api/seller';
export default {
  data() {
    return {
        list: null,
        listLoading: true,
        listQuery: {
            page: 1,
            num: 20,
            keyword: undefined,
            status: '',
            contractEnd: undefined
        },
        total: null,
        activeName: '0'
    };
  },
  mounted() {
  },
        created() {
            this.getList();
        },

  methods: {
    getList() {
        this.listLoading = true;
        seller_list(this.listQuery).then(response => {
            this.list = response.data.list;
            this.total = response.data.total;
            this.listLoading = false;
        })
    },
    handleFilter() {
        this.listQuery.page = 1;
        this.getList();
    },
    handleSizeChange(val) {
        this.listQuery.num = val;
        this.getList();
    },
    handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
    },
    handleClick(tab, event) {
      this.listQuery.status = this.activeName;
      this.handleFilter();
      // console.log(this.activeName)
    },
    leaveTab(activeName, oldActiveName) {
      // console.log(activeName)
      // return false;
    },
    handleCreate() {
      this.$router.push("/company/shop_create") 
    },
    handleUpdate(row) {
      this.$router.push("/company/shop_edit?id=" + row.id) 
    },
    getStatusColor(row) {
        if(row.status === 1) {
            return "success"
        }

        return "danger"
    },
    handleDelete(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                seller_del(row.id)
                    .then(() => {
                        this.$message.success("商户删除成功");
                        const index = this.list.indexOf(row);
                        this.list.splice(index, 1);
                    });
            }).catch(()=>{});
    },
    handleCheck(row) {
        this.$confirm('确定审核?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                seller_check(row.id)
                    .then(() => {
                        this.$message.success("商户审核成功");
                        this.getList();
                    });
            }).catch(()=>{});
    },
    handleCheck2(row) {
        this.$confirm('确定取消审核?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                seller_check2(row.id)
                    .then(() => {
                        this.$message.success("商户取消审核成功");
                        this.getList();
                    });
            }).catch(()=>{});
    },
    handleRefuse(row) {
        this.$confirm('确定拒绝审核?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                seller_refuse(row.id)
                    .then(() => {
                        this.$message.success("商户拒绝审核成功");
                        this.getList();
                    });
            }).catch(()=>{});
    },
  }
};
</script>
